<template>
	<view class="contents" @click="goDetail">
		<view class="top">
			<image :src="item.avatar ?item.avatar :'../../static/R-C.jpg'" mode="aspectFill"></image>
			<view class="eye">
				<view>
					<u-icon name="eye" color="#fff" size="10"></u-icon>
					<text style="margin-left: 5rpx;">{{item.view_count ? item.view_count:0}}</text>
				</view>
				<view>
					<u-icon name="chat" color="#fff" size="10"></u-icon>
					<text style="margin-left: 5rpx;">{{total}}</text>
				</view>

			</view>
		</view>
		<view class="info">
			<view class="up">
				<text>{{item.content}}</text>
			</view>
			<view class="dowm">
				<view class="left">
					<u-avatar
						:src="item.user_id[0].avatar ?  item.user_id[0].avatar:'https://mp-ccffe9fb-6491-49ff-938f-e2f9c933dbd6.cdn.bspapp.com/backgroundImage/default_avatar.png'"
						size="20"></u-avatar>
					<text class="author">{{item.user_id[0].nickname}}</text>
					<text>{{datetime}}</text>
				</view>
				<view class="right" @click.stop="update">
					<u-icon name="more-dot-fill" color="#c2d5ff" size="20"></u-icon>
				</view>
			</view>
				
		</view>

	</view>
</template>

<script>
	const db = uniCloud.database()
	import {
		formatDate
	} from "@/utils/time.js"
	const obj = uniCloud.importObject('view_count')

	export default {
		name: "post-item",
		data() {
			return {
				total: 0,
				
			};
		},
		computed: {
			datetime() {
				if (this.item.publish_date) {
					return formatDate(this.item.publish_date, 1)
				} else {
					return formatDate(0)
				}
			},
		},
		onLoad() {

		},
		onShow() {

			uni.$on('criticism', this.criticism)
		},
		mounted() {

		},
		props: ['item'],
		watch: {
			item: {
				immediate: true,
				handler() {
					this.getcommentnumber()
				}
			}
		},
		methods: {
			criticism() {
				this.total = this.total + 1
			},
			goDetail() {
				uni.navigateTo({
					url: `/pages_video/video-detail/video-detail?_id=${this.item._id}`
				})
				let a = obj.view_count(this.item._id)
				this.item.view_count = this.item.view_count + 1
			},
			update() {
				this.$emit('isshow',this.item._id)
			},
			async getcommentnumber() {

				await db.collection('criticism').where({
					video_id: this.item._id,
					comment_type:0
				}).count().then(res => {
					this.total = res.result.total
				})
			}
		},


	}
</script>

<style lang="scss" scoped>
	.contents {
		color: #c2d5ff;
		width: 48vw;
		background-color: #283b65;
		border-radius: 10rpx;
		overflow: hidden;
		margin-top: 10rpx;

		// height: 50vh;
		.top {
			position: relative;
			height: 15vh;

			image {
				width: 100%;
				height: 100%;
			}

			.eye {
				position: absolute;
				margin-left: 10rpx;
				font-size: 20rpx;
				// color: white;
				bottom: 10rpx;
				display: flex;
				justify-content: space-between;
				width: 40%;

				view {
					display: flex;

				}
			}
		}

		.info {
			height: 120rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.up {
				padding: 10rpx;
				font-size: 10rpx;

				text {

					height: 100%;
					// padding: 10rpx 10rpx 0 10rpx;
					width: 100%;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					font-size: 20rpx;
				}
			}

			.dowm {
				padding: 0 8rpx 8rpx 8rpx;
				display: flex;
				font-size: 10rpx;
				align-items: center;
				justify-content: space-between;

				.left {
					flex: 1;
					display: flex;
					align-items: center;
					font-size: 25rpx;

					.author {
						margin: 0 10rpx 0 10rpx;
					}
				}
			}
		}
	}
</style>
<!--  -->